<!-- 简历上传详情 -->
<template>
  <div class="common-pd-page resume-upload-container">
    <HPModuleTitle :title-text="'简历上传详情'"></HPModuleTitle>
    <backButton :backPath="'/resume'" />
    <div class="upload-box" v-if="isShowResumeUploadBtn && $route.query.suspendState != 1">
      <ul class="el-row--flex is-justify-space-around upload-box-group">
        <li class="el-col-12">
          <el-button
            type="primary"
            class="add-upload-btn"
            @click="showResumeUploadForm"
          >
            <span class="iconfont icon-jia add-upload-icon"></span>
            <span class="upload-btn-txt"> 简历上传</span>
          </el-button>
        </li>
        <li class="el-col-12">
          <el-button
            class="save-md-btn"
            :disabled="isCan"
            v-show="isShowResumeForm"
            @click="savedResumeInfo('formData')"
            >提交</el-button
          >
        </li>
      </ul>
      <div class="margin-bt-20 upload-form" v-show="isShowResumeForm">
        <ul
          class="el-row--flex is-justify-space-around upload-box-group upload-form-header"
        >
          <li class="el-col-12">
            <span class="iconfont icon-document title-icon"></span>
            <span class="title-txt">候选人信息</span>
          </li>
          <li class="el-col-12">
            <span class="fetu-item fetu-del" @click="delResumeInfo">
              <span class="iconfont icon-delete fetu-icon"></span>
              <span class="fetu-txt">删除</span>
            </span>
          </li>
        </ul>
        <el-form
          :inline="true"
          :label-position="'right'"
          ref="formData"
          :rules="checkForm"
          :label-width="'140px'"
          :model="formData"
          :class="'el-row--flex upload-form-box'"
        >
          <el-form-item
            label="候选人名字："
            prop="candidate"
            :class="'el-col-8'"
          >
            <el-input
              clearable
              id="candidate"
              v-model="formData.candidate"
              :maxlength="8"
              placeholder="请输入候选人名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历：" prop="educational" :class="'el-col-8'">
            <el-select
              id="educational"
              v-model="formData.educational"
              :clearable="true"
              placeholder="请选择学历"
            >
              <el-option
                v-for="item in educatInfo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="工作经验(年)："
            prop="handsOn"
            :class="'el-col-8'"
          >
            <el-input
              id="handsOn"
              clearable
              v-model="formData.handsOn"
              :maxlength="2"
              placeholder="请输入工作经验"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="求职状态："
            prop="jobStatus"
            :class="'el-col-8'"
          >
            <el-select
              id="jobStatus"
              v-model="formData.jobStatus"
              :clearable="true"
              placeholder="请选择求职状态"
            >
              <el-option
                v-for="item in curstaInfo"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="最快到岗时间："
            prop="inJboTime"
            :class="'el-col-8'"
          >
            <el-date-picker
              id="inJboTime"
              v-model="formData.inJboTime"
              :picker-options="pickerOptions"
              type="date"
              placeholder="选择日期到岗时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="候选人电话："
            prop="candidatePhone"
            :class="'el-col-8'"
          >
            <el-input
              id="candidatePhone"
              clearable
              v-model.number="formData.candidatePhone"
              :maxlength="15"
              placeholder="请输入候选人电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="工作城市：" prop="city" :class="'el-col-8'">
            <el-input
              id="city"
              clearable
              v-model="formData.city"
              :disabled="true"
              placeholder="请选择工作城市"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="推荐理由："
            :class="'el-col-8 inp-textarea'"
            prop="reason"
          >
            <el-input
              id="reason"
              clearable
              type="text"
              v-model="formData.reason"
              auto-complete="off"
              :maxlength="300"
              placeholder="请输入推荐理由"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="简历上传/pdf："
            :class="'el-col-8 upload-pdf-item'"
            prop="uploadFileUrl"
          >
            <el-upload
              :class="'resume-uplaod-box'"
              :show-file-list="false"
              :file-list="fileList"
              :before-upload="beforeAvatarUpload"
              :action="fUrl"
              name="recfile"
              list-type="picture"
              :headers="headerObj"
              :on-preview="handlePictureCardPreview"
              :on-error="uploadError"
              :on-exceed="handleExceed"
              :limit="1"
              :http-request="doUpload"
              :on-success="uploadSuccess"
              :on-remove="handleRemove"
            >
              <el-button
                v-if="uploading"
                :loading="true"
                class="uploading"
              ></el-button>
              <!-- <img src="@/assets/images/pdf.png" alt="" class="uploading"> -->
              <div v-show="fileList[0] && fileList[0].url" class="file-box">
                <img
                  src="../../../assets/images/pdf.png"
                  alt=""
                  class="uploading"
                />
                <div>
                  <i class="el-icon-zoom-in" @click.stop="previewFile"></i>
                  <i class="el-icon-delete" @click.stop="deleteFile"></i>
                </div>
              </div>
              <span class="upload-button">
                <i class="el-icon-plus"></i>
              </span>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="margin-bt-20" v-if="isShowUploadResume">
      <HPModuleTitle
        :title-text="'已上传简历'"
        :showBorBottom="false"
        :showIcon="false"
        :showMarBottom="false"
      ></HPModuleTitle>
      <el-table
        :data="endUploadList"
        align="center"
        border
        style="width: 100%"
        :class="'table-box'"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="record" label="学历"> </el-table-column>
        <el-table-column prop="workLife" label="工作年限"> </el-table-column>
        <el-table-column prop="isSelected" label="简历筛选状态">
          <template slot-scope="scope">
            <span :class="resumeSearchStatus[scope.row.isSelected].className">{{ resumeSearchStatus[scope.row.isSelected].label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="jobStatus" label="求职状态"> </el-table-column>
        <el-table-column prop="inJobTime" label="最快到岗时间">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="uploadTime" label="上传时间"> </el-table-column>
        <el-table-column prop="address" label="操作" :class="'operate-col'">
          <template slot-scope="scope">
            <span class="look-resume resume-txt">
              <span
                class="iconfont icon-yanjing cursor"
                @click="showPDFImgDialog(scope.row, 'show', '1', 'pdf')"
              ></span>
            </span>
            <span
              class="down-resume resume-txt"
              @click="downloadFile(scope.row)"
            >
              <span class="iconfont icon-xiazai cursor"></span>
            </span>
            <div class="down-box" v-show="false">
              <a
                class="down-btn"
                ref="downBtn"
                :href="downUrl"
                :download="downFileName"
              ></a>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <DemandDetail :text-datas="demanDetailInfo"></DemandDetail>
    <PreviewPdfOrImage></PreviewPdfOrImage>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import LocalStore from "store";
import bus from "@/eventBus";
// import { isFileName } from "@/assets/js/reg";
import { showOrDownFile } from "@/assets/js/preOrDownFile";
import { formatDate } from "@/utils/dateFormat";
import { dec_demandDetail } from "@/decs/dec_interviewDemandDetail";
import { doUploading } from "@/fetch/api";
import {
  downloadFile,
  getSelectMap,
  getSelectMapTemp,
} from "@/fetch/modules/common";
import Verify from "@/utils/checkInpu";
import { getResumeDetailInfo, saveResumeInfo } from "@/fetch/modules/resume";

import HPModuleTitle from "@/components/HPModuleTitle";
import DemandDetail from "@/components/DemandDetail";
import PreviewPdfOrImage from "@/components/PreviewPDFOrImage";
import { resumeUploadStatus, resumeSearchStatus } from '../js/status'

export default {
  components: {
    HPModuleTitle,
    DemandDetail,
    PreviewPdfOrImage,
  },
  // mixins: [DAlert],
  data() {
    return {
      resumeSearchStatus: resumeSearchStatus,
      demanDetailInfo: {
        postCode: "", // 岗位名称
        postType: "", // 岗位分类
        salaryRange: "", // 预算范围
        costType: "", //费用分类
        needsNumber: "", // 需求数量
        projectedDeadlines: "", // 预计工作期限
        supplierName: "", // 供应商名称
        workLife: "", // 工作年限
        workingPlace: "", // 工作地点
        createDate: "", // 发布日期
        positionInformation: "", // 岗位说明
        requirements: "", // 任职要求
        employeeName: "", // 直属上级
        beginTime: "", // 入场时间
      },
      downUrl: "",
      downFileName: "",
      formData: {
        candidate: "", // 候选人名称
        educational: "", // 学历
        uploadName: "", // 上传人姓名
        handsOn: "", // 工作经验
        jobStatus: "", // 求职状态
        uploadPhone: "", // 上传人电话
        availableTime: "", // 到岗时间
        inJboTime: "", //
        reason: "", // 推荐理由
        uploadEmail: "", // 上传人邮箱
        candidatePhone: "", // 候选人电话
        uploadFileUrl: "", //上传文件存放的路径
        city: "", //工作城市
        cityCode: "", // 工作城市编码
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      headerObj: {
        "Access-Token": LocalStore.get("token"),
      },
      checkForm: {
        candidate: [
          {
            validator: Verify.nonEmpty,
            message: "请输入候选人名字",
            required: true,
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            validator: Verify.nonEmpty,
            message: "请选择城市",
            tirgger: "blur",
          },
        ],
        uploadName: [
          {
            validator: Verify.nonEmpty,
            message: "请输入上传人名字",
            required: true,
            trigger: "blur",
          },
        ],
        reason: [
          {
            validator: Verify.nonEmpty,
            message: "请输入推荐理由",
            required: true,
            trigger: "blur",
          },
        ],
        uploadPhone: [
          { validator: Verify.phone, required: true, trigger: "blur" },
        ],
        candidatePhone: [
          { validator: Verify.phone, required: true, trigger: "blur" },
        ],
        uploadEmail: [
          { validator: Verify.email, required: true, trigger: "blur" },
        ],
        handsOn: [
          { validator: Verify.checkNumber, required: true, trigger: "blur" },
        ],
        educational: [
          { required: true, message: "请选择学历", trigger: "change" },
        ],
        inJboTime: [
          {
            required: true,
            type: "date",
            message: "请选择到岗时间",
            trigger: "change",
          },
        ],
        jobStatus: [
          { required: true, message: "请选择求职状态", trigger: "change" },
        ],
        uploadFileUrl: [
          { required: true, message: "请上传简历", trigger: "change" },
        ],
      },
      endUploadList: [],
      fileList: [],
      inJboTime: "",
      prssWidth: "0",
      fileObj: {
        size: "",
        name: "",
      },
      isShowResumeUploadBtn: false,
      needId: "",
      state: "",
      educatInfo: [], // 学历
      curstaInfo: [], // 求职状态
      isShowUploadFileBox: false,
      uploadFileState: true,
      isShowNameBox: true, // 上传文件名称
      isShowPropessBox: false, // 上传文件进度条
      isShowUploadStateBox: false, // 上传文件状态
      isShowUploadResume: false, // 是否显示已上传的列表
      isShowResumeForm: false, // 是否显示简历概要表单
      uploadFileStateText: "",
      uploadFileStateClass: "",
      parentId: "educat",
      curSta: "curSta",
      uploadedInfo: [],
      isCan: false,
      isClosed: true,
      fUrl: FILE_URL + "/cvdbSupplier/doUploading.do",
      needsUpdater: "", // 需求接收人
      uploading: false,
    };
  },
  computed: {
    ...mapGetters(["getSelectMapData", "getSelectMapDataTemp"]),
    ...mapState(["mapData", "mapTempData"]),
  },
  beforeMount() {
    let id = this.$route.params.id;
    this.needId = id;
    this.state = this.$route.query.stus;
    if (this.state === "1") {
      this.isShowUploadResume = false;
    } else {
      if (this.state === "6") {
        this.isClosed = false;
      } else {
        this.isClosed = true;
      }
      this.isShowUploadResume = true;
    }

    getSelectMap({ parentId: this.curSta }).then((res) => {
      let tempObj = res.data;
      if (tempObj.state === "0000") {
        let tempData = tempObj.data;
        let len = tempData.length;
        let tempItem = {};
        let endTempItem = {};
        this.curstaInfo = [];
        for (let i = 0; i < len; i++) {
          tempItem = tempData[i];
          endTempItem = {
            label: tempItem.lable,
            value: tempItem.coded,
          };
          this.curstaInfo.push(endTempItem);
        }
      }
    });
    this.getDemandDetail();
  },
  mounted() {
    // bus.$on("down-file", this.downFile);
    bus.$on("submit-city-data", this.getCityName);
  },
  methods: {
    previewFile() {
      console.log(this.fileList)
      showOrDownFile({ zz: this.fileList[0].realUrl.file }, "show", "1");
    },
    deleteFile() {
      this.fileList = [];
      this.formData.uploadFileUrl = "";
    },
    doUpload(files) {
      console.log(files.file);
      this.uploading = true;
      const file = files.file;
      const data = new FormData();
      data.append("recfile", file);
      // data.append('fileName', file.name)
      doUploading(data).then((res) => {
        const data = res.data;
        this.fileList = [];
        console.log(data, "asdasd");
        if (data.state === '0000') {
          this.formData.uploadFileUrl = data.data;
          this.fileList.push({
            url: require("./../../../assets/images/pdf.png"),
            realUrl: data.data,
          });
          this.uploading = false;
          console.log(this.fileList, "this.fileList");
        } else {
          this.uploading = false;
        }
      });
    },
    downloadFile(row) {
      downloadFile(row.zz).then((res) => {
        const link = document.createElement("a");
        const blob = new window.Blob([res.data], {
          type: "application/pdf;charset=UTF-8",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = `${ row.fileName.replace('.pdf', '') || row.name }.pdf`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    getDemandDetail() {
      getResumeDetailInfo({ needsId: this.needId }).then((res) => {
        let tempObj = res.data;
        if (tempObj.state === "0000") {
          let tempData = tempObj.data,
            tempUploadInfos = tempData.cvdbUploadInfo,
            tempDetailInfo = tempData.needsDetails,
            tempUploadPeopleInfo = tempData.uploadInfo;

          // 需求详情数据解构
          this.demanDetailInfo = dec_demandDetail(
            tempDetailInfo,
            "",
            this.isShowGetDemandedBtn
          );

          this.formData.city = tempDetailInfo.workingCity; // 简历上传填写工作城市
          this.formData.cityCode = tempDetailInfo.cityCode; // 简历上传填写工作城市code
          if (tempDetailInfo.state === 6) {
            // 需求已关闭
            this.isShowResumeUploadBtn = false;
            this.demanDetailInfo.isCloseDetail = true;
          } else {
            this.isShowResumeUploadBtn = true;
            this.demanDetailInfo.isCloseDetail = false;
          }
          // 上传人信息默认填写项
          if (tempUploadPeopleInfo) {
            this.formData.uploadName = tempUploadPeopleInfo.uploaderName;
            this.formData.uploadPhone = tempUploadPeopleInfo.uploaderMobile;
            this.formData.uploadEmail = tempUploadPeopleInfo.uploaderEmail;
          }
          this.needsUpdater = tempDetailInfo.needsUpdater; // 需求接收人
          // 已上传简历列表
          let len = tempUploadInfos.length;
          let tempItem = {};
          let endTempObj = {};
          if (len <= 0) {
            return;
          }
          this.endUploadList = [];
          for (let i = 0; i < len; i++) {
            tempItem = tempUploadInfos[i];
            endTempObj = {
              name: tempItem.surname, // 姓名
              record: tempItem.education_code, // 学历
              workLife: tempItem.work_experience, // 工作年限
              jobStatus: tempItem.current_status_code, // 求职状态
              inJobTime: tempItem.post_time, // 到岗时间
              phone: tempItem.telephone, // 联系电话
              uploadTime: tempItem.create_date, // 上传时间
              id: tempItem.telephone,
              zz: tempItem.file_url,
              cvdbId: tempItem.cvdbId,
              isSelected: tempItem.isSelected,
              fileName: tempItem.fileName
            };
            this.endUploadList.push(endTempObj);
          }
        }
      });
    },
    // 获取城市名称
    getCityName(citys) {
      if (citys) {
        let tempCity = {},
          tempCitys = [],
          tempCityCode = [];
        for (let i = 0; i < citys.length; i++) {
          tempCity = citys[i];
          tempCitys.push(tempCity.lable);
          tempCityCode.push(tempCity.coded);
        }
        this.formData.city = tempCitys.join(",");
        this.formData.cityCode = tempCityCode.join(",");
        console.log(this.formData);
      }
    },
    handlePictureCardPreview(file) {
      let tempUrl = this.formData.uploadFileUrl;
      showOrDownFile({ zz: tempUrl }, "show", "1");
      this.dialogImageUrl = file.url;
      this.fileDialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.fileList = [];
      this.formData.uploadFileUrl = "";
    },
    uploadError() {
      this._showMessage("error", "上传文件出错,请重新刷新页面再试!");
    },
    showResumeUploadForm() {
      getSelectMapTemp({ parentId: "educat" }).then((res) => {
        let tempObj = res.data;
        if (tempObj.state === "0000") {
          let tempData = tempObj.data;
          let len = tempData.length;
          let tempItem = {};
          let endTempItem = {};
          this.educatInfo = [];
          for (let i = 0; i < len; i++) {
            tempItem = tempData[i];
            endTempItem = {
              label: tempItem.lable,
              value: tempItem.coded,
            };
            this.educatInfo.push(endTempItem);
          }
        }
        this.isShowResumeForm = true;
      });
    },
    beforeAvatarUpload(file) {
      console.log(this.fileList);
      let isPdf =
        file.type === "application/pdf" || file.name.indexOf(".pdf") !== -1;

      if (!isPdf) {
        this._showMessage("error", "只能上传PDF格式文件！");
      }

      return isPdf;
    },
    handleExceed(files, fileList) {
      this.$message.warning("仅支持上传1个文件");
    },

    savedResumeInfo(formName) {
      let self = this;
      const { name, file } = this.formData.uploadFileUrl
      console.log(this.formData.uploadFileUrl)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("是否提交此简历信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass: "d-message-box",
            confirmButtonClass: "mes-confir-btn",
            cancelButtonClass: "mes-cancel-btn",
          })
            .then(() => {
              this.isCan = true;
              this.formData.id = this.needId;
              this.formData.availableTime = formatDate(this.formData.inJboTime);
              if (!this.formData.uploadFileUrl) {
                this._showMessage("error", "请上传简历!");
                this.isCan = false;
                return;
              }

              this.formData.needsUpdater = this.needsUpdater; // 需求接收人
              saveResumeInfo(this.formData).then((res) => {
                let tempObj = res.data;
                if (tempObj.state === "0000") {
                  self.delResumeInfo();
                  this.getDemandDetail();
                  if (this.state === "1") {
                    this.isShowUploadResume = true;
                  }
                  this._showMessage("success", tempObj.message, function () {
                    //self.$router.push('/resume')
                  });
                } else {
                  // this._showMessage("error", tempObj.message);
                  this.isCan = false;
                }
              });
            })
            .catch(() => {});
        } else {
          this.isCan = false;
          return false;
        }
      });
    },
    delResumeInfo() {
      this.isShowResumeForm = false;
      this.formData.candidate = "";
      this.formData.educational = "";
      this.formData.handsOn = "";
      this.formData.jobStatus = "";
      this.formData.availableTime = "";
      this.formData.reason = "";
      this.formData.candidatePhone = "";
      this.formData.uploadFileUrl = "";
      this.isCan = false;
      this.fileList = [];
      this.isShowUploadFileBox = false;
      this.$refs["formData"].resetFields();
    },
    selectUploadFile(file, fileList) {
      let stus = file.status;
      if (stus === "ready") {
        this.isShowUploadFileBox = true;
        let size = file.size / 1024 / 1024;
        this.fileObj.size = Math.ceil(size) + "MB";
        this.fileObj.name = file.name;
        this.isShowNameBox = true;
      }
    },
    uploadProgress(event, file, fileList) {
      this.isShowPropessBox = true;
      this.prssWidth = Math.ceil(event.percent);
    },
    uploadFileError(err, file, fileList) {
      this.uploadFileSta = false;
      this.isShowUploadStateBox = true;
      this.uploadFileStateText = "上传失败";
      this.uploadFileStateClass = "error";
    },
    uploadSuccess(res, file, fileList) {
      console.log("上传成功路径：" + res.data);
      console.log(fileList);
      if (res.data) {
        this.formData.uploadFileUrl = res.data;
      }
    },

    showPDFImgDialog(row, type, isSave, fileType) {
      //预览文件
      showOrDownFile(row, type, isSave);
    },
    beforUploadFile(file) {
      this.isShowUploadFileBox = true;
      let size = file.size / 1024 / 1024;
      this.fileObj.size = Math.ceil(size) + "MB";
      this.fileObj.name = file.name;
      this.isShowNameBox = true;
    },
    selectFile() {
      _j(".showWindowPup").click();
    },
    _showMessage(type, msg, fn) {
      this.$message({
        showClose: false,
        message: msg,
        type: type,
        onClose: function () {
          if (fn instanceof Function) {
            fn && fn();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.resume-upload-container {
  position: relative;
  .font-color-blue {
    color: $main-color-sub;
  }
  .font-color-green {
    color: $main-font-color-green;
  }
  .font-color-red {
    color: $main-font-color-dangerous;
  }
  .el-upload-list__item {
    transition: none;
  }
  .upload-box-group {
    margin-bottom: 20px;
    li:first-child {
      text-align: left;
    }
    li:last-child {
      text-align: right;
    }
  }
  .resume-txt {
    color: #fb7299;
    cursor: pointer;
    padding-right: 10px;
  }
  .upload-form {
    border: 1px solid #ededed;
    &-header {
      height: 40px;
      line-height: 40px;
      background-color: #f9fbfd;
      border-bottom: 1px solid #ededed;
      margin-bottom: 20px;
      padding: 0 20px;
    }
    .fetu-del {
      cursor: pointer;
    }
    &-box {
      flex-wrap: wrap;
    }
    &-box .el-form-item {
      text-align: left;
    }
    div.el-upload--picture,
    .el-upload-list--picture .el-upload-list__item {
      height: 40px;
      line-height: 40px;
      i.el-icon-plus {
        padding: 5px;
      }
    }
  }

  .el-upload--picture .upload-button {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 70px;
    cursor: pointer;
    height: 40px;
    vertical-align: top;
    display: inline-block;
  }
  .uploading {
    width: 70px;
    height: 38px;
  }

  .file-box {
    display: inline-block;
    position: relative;
    &:hover {
      > div {
        display: block;
      }
    }
    > div {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        &:last-child {
          margin-left: 10px;
        }
      }
    }
  }

  .upload-pdf-item {
    .el-form-item__label::before {
      content: "*";
      color: #fa5555;
      margin-right: 4px;
    }
  }
  .el-form--inline .el-form-item {
    margin-right: 0px !important;
  }
  .margin-bt-20 {
    margin-bottom: 20px;
  }
}
</style>
